import React, { useContext } from 'react'
import classNames from 'classnames'
import { type MenuItemProps } from './types'
import { MenuContext } from './menu'

export const MenuItem: React.FC<MenuItemProps> = ({
	index,
	disabled,
	className,
	style,
	children
}) => {
	const context = useContext(MenuContext)
	const classes = classNames('menu-item', className, {
		'is-disabled': disabled,
		'is-active': context.index === index
	})

	const handleClick = () => {
		if (context.onSelect && !disabled && typeof index === 'string') {
			context.onSelect(index!)
		}
	}

	return (
		<li className={classes} style={style} onClick={handleClick}>
			{children}
		</li>
	)
}

MenuItem.displayName = 'MenuItem'

// MenuItem.defaultProps = {
// 	defaultIndex: 0,
// 	mode: 'horizontal'
// }

export default MenuItem
